
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Monitor of CPU and Memory Usage</title>
    <script src="/static/js/chart.js"></script>
    <link href="/static/css/style.css" rel="stylesheet"></link>
</head>
<body>
    <div class="main">
        <h1>Monitor of CPU and Memory Usage</h1>
        <p>Default: show last 30 dots, 1 dot / 6 min.</p>
    </div>
    <div class="monitor" id="monitor"></div>

    <hr>

    <div class="main">
        <h1>Monitor of GPU and its Memory Usage</h1>
        <p>Default: show last 30 dots, 1 dot / 6 min. Core cmd: $ nvidia-smi</p>
    </div>

    <div class="monitor" id="monitor_gpu"></div>



    <div class="footer">
        <p>
            <span class="light">System moniter: version {{version}}</span>
        </p>
        <p>
            <span>&copy; <a target="_blank" href="https://github.com/biomooc">BioMooc 2024</a> </span>
            | <b><a target="_blank" href="https://github.com/BioMooc/system_moniter" title="监控局域网中若干服务器的CPU和内存使用状况。">Fork Me@GitHub</a></b>
            | <b><a target="_blank" href="https://gitee.com/dawnEve/system_moniter" title="监控局域网中若干服务器的CPU和内存使用状况。">Fork Me@Gitee</a></b>
            | <a href="/api">help</a>
        </p>
    </div>

    <script>
        var oMonitor=document.getElementById("monitor");
        // part 1: get IP list
        async function fetchIPList(api_path="ip_list") {
            const response = await fetch('/api/'+api_path);
            const data = await response.json();

            // 数据格式转换
            var ip_arr=[];
            for(var i=0; i<data.length; i++){
                ip_arr.push(data[i][0])
            }
            return ip_arr;
        }

        // part 2: open one panel for each IP
        function loadFrame(unique_ip, api_name="show", panel_container=oMonitor) {
            //获取uniq ip，并排序
            unique_ip.sort();
            console.log("unique_ip:", unique_ip)
            
            //为每个设置一个frame?
            for(var i in unique_ip){
                var url=location.protocol + "//"+ location.host+"/"+api_name+"/"+ 
                    unique_ip[i]+"?last="+{{last_number}}
                console.log(i, unique_ip[i], url)
                //
                var oDiv = document.createElement("div");
                oDiv.setAttribute("class", "iframe-container")

                //
                var oIframe = document.createElement("iframe");
                oIframe.setAttribute("src", url)
                oIframe.setAttribute("width", "100%")
                oIframe.setAttribute("height", "100%")

                oDiv.append(oIframe);
                panel_container.append(oDiv)
            }
        }

        fetchIPList().then(loadFrame);


// GPU
var oMonitor_gpu=document.getElementById("monitor_gpu");
fetchIPList("ip_list_gpu").then(function(x){
    loadFrame(x,"show_GPU", oMonitor_gpu)
});
</script>

</body>
</html>